@import '../../styles/variables';
@import '../../styles/colours';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

.player-home-row-container {
    display: flex;
}

.keys {
    display: flex;
    flex-direction: column;
    max-height: $keyteki-card-height;
    max-width: $keyteki-card-height / 3;
    margin-left: 5px;
    margin-top: 5px;

    &.small {
        max-height: $keyteki-card-sm-height;
        max-width: $keyteki-card-sm-height / 3;
    }

    &.large {
        max-height: $keyteki-card-lg-height;
        max-width: $keyteki-card-lg-height / 3;
    }

    &.x-large {
        max-height: $keyteki-card-xl-height;
        max-width: $keyteki-card-xl-height / 3;
    }

    img {
        max-height: 33%;
    }
}
